<template>
  <div class="login">
    <t-form class="login_form" label-width="0" :data="loginForm" :rules="loginRules" ref="loginForm" @submit="handleLogin">
      <h3 class="title">
        Monitor
      </h3>
      <t-form-item name="username">
        <t-input v-model="loginForm.username" size="large" placeholder="请输入账号">
          <template #prefix-icon>
            <t-icon name="user" />
          </template>
        </t-input>
      </t-form-item>
      <t-form-item name="password">
        <t-input
          :type="showPsw ? 'text' : 'password'"
          size="large"
          v-model="loginForm.password"
          placeholder="请输入密码"
          @keyup.enter.native="handleLogin"
        >
          <template #prefix-icon>
            <t-icon name="lock-on" />
          </template>
           <template #suffix-icon>
            <t-icon :name="showPsw ? 'browse' : 'browse-off'" @click="showPsw = !showPsw" />
          </template>
        </t-input>
      </t-form-item>
        <t-form-item name="code">
        <t-input 
        v-model="loginForm.code" 
        @keyup.enter.native="handleLogin"
        size="large" 
        placeholder="请输入验证码"
        >
          <template #prefix-icon>
            <t-icon name="lock-on" />
          </template>
        </t-input>
          <div class="login-code">
          <img :src="codeUrl" class="login-code-img" @click="getCode">
        </div>
      </t-form-item>
       <t-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 20px 0px;">记住密码</t-checkbox>
      <t-form-item style="padding-top: 8px">
        <t-button theme="primary" :loading="loading" type="submit" style="width:100%">
          <span v-if="!loading">登 录</span>
          <span v-else>登 录 中...</span>
        </t-button>
        <!-- <t-button theme="primary" v-else  type="submit" style="width:100%">登 录 中...</t-button> -->
      </t-form-item>
    </t-form>
  </div>
</template>

<script>
import { getCodeImg ,login} from '@/api/vadmin/login';
import Cookies from 'js-cookie';
import { setToken } from "@/utils/auth";
import { decrypt, encrypt } from '@/utils/jsencrypt';
import md5 from 'js-md5';
import proxy from '../../config/host';

const env = import.meta.env.MODE || 'development';
export default {
  name: 'Login',
  data() {
    return {
      showPsw: false,
      logo: '',
      codeUrl: '',
      cookiePassword: '',
      loginForm: {
        username: '',
        password: '',
        rememberMe: false,
        code: '',
        uuid: '',
      },
      loginRules: {
        username: [{ required: true, trigger: 'change', message: '用户名不能为空' }],
        password: [{ required: true, trigger: 'change', message: '密码不能为空' }],
        code: [{ required: true, trigger: 'change', message: '验证码不能为空' }],
      },
      loading: false,
      redirect: undefined,
    };
  },
  watch: {
    $route: {
      handler(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true,
    },
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getCode() {
      getCodeImg().then((res) => {
        this.codeUrl = res.data.image_url
          ? proxy[env].API + res.data.image_url
          : require('@/assets/profile.jpg');
        this.loginForm.uuid = res.data.key;
      });
    },
    getCookie() {
      const username = Cookies.get('username');
      const password = Cookies.get('password');
      const rememberMe = Cookies.get('rememberMe');
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
      };
    },
    // 账号登录
    handleLogin({ validateResult }) {
      if(validateResult === true){
        console.log(1);
        this.loading = true;
        if (this.loginForm.rememberMe) {
          Cookies.set('username', this.loginForm.username, { expires: 30 });
          Cookies.set('password', encrypt(this.loginForm.password), { expires: 30 });
          Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
        } else {
          Cookies.remove('username');
          Cookies.remove('password');
          Cookies.remove('rememberMe');
        }
        const loginForm = JSON.parse(JSON.stringify(this.loginForm));
        loginForm.password = md5(loginForm.password);
      
        this.$store.dispatch("user/Login", loginForm)
        this.loading = false;
     
      }
      // const username = loginForm.username.trim();
      // const {password,code,uuid} = loginForm;
      // login(username, password, code, uuid).then(res => {
      //   if (res.code === 200) {
      //     setToken(res.data.token);
      //     this.$router.push('/vadmin/account')
      //     this.loading = false;
      //   }else{
      //     this.$message.error(res.msg)
      //     this.loading = false;
      //   }
      // })
    },
  },
};
</script>

<style lang="less">
body {
  background-size: 100% 100%;
}
.login {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  background: url('../../assets/assets-login-bg-white.png') no-repeat;
  background-position: center center;
  background-size: cover;
}
.login_form {
  // border: 1px solid #000;
  width: 400px;
  margin-left: 100px;
}
.title {
  margin:  30px auto;
  text-align: center;
  color: #707070;
  font-size: 28px;
}
.login-code {
  width: 33%;
  height: 38px;
  float: right;
  img {
    cursor: pointer;
    vertical-align: middle;
  }
}
.login-code-img {
  height: 38px;
}
</style>